<template>
	<view style="margin: 0 10px;">

		<fui-segmented-control :values="values" @click="onSegmentChange" color="#333" height="72" radius="100"
			marginTop="32">
		</fui-segmented-control>
	</view>


	<view v-if="selectedValue === '周卡'">
		<view class="container" v-if="memberType==='周卡用户'">
			<view class="order-box">
				<view class="header">
					<view class="store-name">订单编号：{{memberId}}</view>
					<view class="status"></view>
				</view>
				<view class="item">
					<image class="item-image"
						src="https://i-blog.csdnimg.cn/direct/60ad36a86df649dcbb6d3553bf3e5e48.png"></image>
					<view class="item-details">
						<view class="item-title">{{memberType}}</view>
						<view class="item-options-quantity">
							<view class="item-options">周卡套餐</view>
							<view class="item-quantity">x1</view>
						</view>
					</view>
				</view>
				<view class="footer">
					<view class="timestamp">
						<view class="totalOne">开始时间：{{memberCreateTime}}</view>
					</view>
				</view>
				<view class="footer">
					<view class="timestamp">
						<view class="totalOne">结束时间：{{memberEndTime}}</view>
					</view>

				</view>
				<view class="footer">
					<view class="timestamp">
					
					</view>
					<view class="button-container">
						<button class="reorder-button">周卡</button>
					</view>

				</view>
			</view>
		</view>
		<view v-else>
			<fui-empty src="https://zjdemo.xuande.work:8889/photo/65cfff1d2fbe4ceeac42524d021f21ff.png" title="暂无周卡记录"
				marginTop="100">
				<fui-button text="返回首页" :size="28" width="336rpx" height="84rpx" radius="100rpx" background="#fff"
					:margin="['64rpx','0']" borderColor="#333" color="#333" @click="goIndex"></fui-button>
			</fui-empty>
		</view>

	</view>
	<view v-else-if="selectedValue === '月卡'">
		<view class="container" v-if="memberType==='月卡用户'">
			<view class="order-box">
				<view class="header">
					<view class="store-name">订单编号：{{memberId}}</view>
					<view class="status">{{memberType}}</view>
				</view>
				<view class="item">
					<image class="item-image" src="https://zjdemo.xuande.work:8889/photo/29a5f6a5164c45a3a088194274296ad0.png"></image>
					<view class="item-details">
						<view class="item-title">月卡套餐</view>
						<view class="item-options-quantity">
						<!-- 	<view class="item-options"></view> -->
							<view class="item-quantity">x1</view>
						</view>
					</view>
				</view>

		<view class="footer">
			<view class="timestamp">
				<view class="totalOne">开始时间：{{memberCreateTime}}</view>
			</view>
		</view>
		<view class="footer">
			<view class="timestamp">
				<view class="totalOne">结束时间：{{memberEndTime}}</view>
			</view>
		
		</view>
		<view class="footer">
			<view class="timestamp">
			
			</view>
			<view class="button-container" >
				<button class="reorder-button">月卡</button>
			</view>
		
		</view>
			</view>
		</view>

		<view v-else>
			<fui-empty src="https://zjdemo.xuande.work:8889/photo/65cfff1d2fbe4ceeac42524d021f21ff.png" title="暂无月卡记录"
				marginTop="100">
				<fui-button text="返回首页" :size="28" width="336rpx" height="84rpx" radius="100rpx" background="#fff"
					:margin="['64rpx','0']" borderColor="#333" color="#333" @click="goIndex"></fui-button>
			</fui-empty>
		</view>


	</view>
</template>

<script setup>
	import {
		url
	} from '@/utils/request.js';
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	const values = ref(['周卡', '月卡']);
	const selectedValue = ref('周卡');

	const memberId = ref('');
	const userName = ref('');
	const userImg = ref('');
	const userNumber = ref('');
	const userAddress = ref('');
	const memberType = ref('');
	const memberCreateTime = ref('');
	const memberEndTime = ref('');
	const endDayNum = ref('');
	const todayIsGet = ref('');


	const onSegmentChange = (event) => {
		selectedValue.value = values.value[event.index];
	};



	onLoad(() => {
		fetchData();
		uni.getStorage({
			key: 'openId',
			success: function(res) {
				uni.request({
					url: url + '/foodCombo/selectMyMember',
					method: 'GET',
					data: {
						openId: res.data
					},
					success: (res) => {
						console.log(res.data.data)
						if (res.data && res.data.data) {
							memberId.value = res.data.data.memberId
							userName.value = res.data.data.userName
							userImg.value = res.data.data.userImg
							userNumber.value = res.data.data.userNumber
							userAddress.value = res.data.data.userAddress
							memberType.value = res.data.data.memberType
							memberCreateTime.value = res.data.data.memberCreateTime
							memberEndTime.value = res.data.data.memberEndTime
							endDayNum.value = res.data.data.endDayNum
							todayIsGet.value = res.data.data.todayIsGet
							console.log(memberType.value, "nihao")
						} else {
							console.log("No data found for userSelectMyNoGetOrder");
						}
					}
				});

			}


		})
	})


	const fetchData = () => {
		uni.getStorage({
			key: 'openId',
			success: function(res) {
				uni.request({
					url: url + '/foodCombo/selectMyMember',
					method: 'GET',
					data: {
						openId: res.data
					},
					success: (res) => {
						console.log(res.data.data)
						if (res.data && res.data.data) {
							memberId.value = res.data.data.memberId
							userName.value = res.data.data.userName
							userImg.value = res.data.data.userImg
							userNumber.value = res.data.data.userNumber
							userAddress.value = res.data.data.userAddress
							memberType.value = res.data.data.memberType
							memberCreateTime.value = res.data.data.memberCreateTime
							memberEndTime.value = res.data.data.memberEndTime
							endDayNum.value = res.data.data.endDayNum
							todayIsGet.value = res.data.data.todayIsGet
							console.log(memberType.value, "nihao")
						} else {
							console.log("No data found for userSelectMyNoGetOrder");
						}
					}
				});

			}


		})
	};


	onPullDownRefresh(() => {
		console.log("下拉刷新");
		fetchData();
		setTimeout(() => {
			console.log('End pulldown refresh');
			uni.stopPullDownRefresh();
		}, 1000);
	});

	onReachBottom(() => {
		console.log("上拉加载更多");
		fetchData();
		setTimeout(() => {
			console.log('End reach bottom refresh');
		}, 1000);
	});
	const goIndex = () => {
		uni.switchTab({
			url: '../index/index'
		})
	}
</script>

<style>
	.container {
		padding: 10px;
	}

	.order-box {
		border: 1px solid #ddd;
		border-radius: 10px;
		padding: 10px;
		background-color: #fff;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.status {
		color: #333;
		font-size: 14px;
	}

	.store-name {
		font-size: 14px;
		word-spacing: 10px;
	}

	.item {
		display: flex;
		border-bottom: 1px solid #f5f5f5;
		padding-bottom: 16px;
		margin-bottom: 16px;
	}

	.item-image {
		width: 36px;
		height: 36px;
		margin-right: 16px;
		align-self: center;
	}

	.item-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.item-title {
		font-size: 16px;
		/* font-weight: bold; */
	}

	.item-options-quantity {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #666;
		margin-bottom: 8px;
	}

	.item-quantity {
		color: #999;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.timestamp {
		font-size: 14px;
		color: #666;
	}

	.totalOne {
		font-size: 16px;
	}

	.button-container {
		display: flex;
		justify-content: flex-end;

	}

	.reorder-button {
		background-color: #333;
		color: #fff;
		border: none;
		margin-top: 10px;
		padding: 5px 38px;
		margin-right: 0px;
		border-radius: 26px;
		font-size: 14px;
	}
</style>